@mixin icondianFize {
  font-size: 0.8rem;
}

#equipLists {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  color: $fontColor; // 列表曲线图标

  /deep/ .el-table__empty-text {
    font-size: 24px;
    @include font_color('con-textColor8');
  }

  .iconshipin,
  .icondingwei,
  .iconquxian {
    font-size: 28px;
    color: $themeColor_1;
    cursor: pointer;
  }

  /deep/ .el-popconfirm__main {
    color: red !important;
  }

  .s {
    transform: rotate(180deg);
  }

  .main_search {
    display: flex;
    justify-content: space-between;
    width: 200px;
    margin-top: 3px !important;
    height: 32px;
    line-height: 32px;
    border-radius: 3px;
    font-size: 0.875rem;
    overflow: hidden;
    z-index: 1;

    &:after {
      position: absolute !important;
      content: '';
      display: block;
      right: -24px;
      width: 1px;
      height: 100%;
      background-color: $textColor_2;
    }

    input {
      padding-left: 4px;
      width: 90%;
      height: 100%;
      border: none;
      outline: none;
      border: 0;
      color: $textColor_2;
      background-color: $bjColor_1;
      border-radius: 3px;
    }

    /deep/ .el-input__inner {
      height: 32px;
      background-color: $n-backColor;
    }

    ::-webkit-input-placeholder {
      font-size: 14px;
      color: $fontColor-minor;
    }

    span {
      display: none;
    }

    /deep/ .el-input__prefix {
      .el-input__icon {
        display: flex;
        align-items: center;
      }
    }
  }

  @mixin spanSS($w) {
    span {
      display: block;
      margin-left: 5%;
      padding: 0 5px;
      width: $w;
      height: 32px;
      line-height: 30px;
      text-align: center;
      font-size: 0.75rem;
      border-radius: 3px;
      border: 1px solid $n-borderColor;
      box-sizing: border-box;
      cursor: pointer;
      color: $textColor_3;
    }
  }

  .searchEquipMain_active {
    display: flex;
    justify-content: space-between;
    align-items: center;

    input {
      flex: auto;
      width: 65%;
    }

    @include spanSS(15%);
  }

  // 左侧设备列表
  .equipList {
    position: relative;
    height: 100%;
    // background: $middleColor_1;
    float: left;
    overflow: hidden;
    border-right: 1px solid $n-borderColor;
    @include main-list;

    .equipList_header {
      @include list-title;

      .el-input {
        width: 100% !important;
      }

      .equipList_header_mian {
        /deep/ .el-button {
          border: none !important;
          background-color: transparent !important;
          padding: 0;
          display: flex;
          align-items: center;

          .iconfont {
            font-size: 24px;
            padding: 0;
            margin-left: 0;
            margin-right: -4px;
          }
        }
      }
    }

    // 左侧设备---导航列表
    .equipList_main {
      position: relative;
      height: calc(100% - 170px);
      padding: 8px 16px 8px 0;
      overflow: auto; // min-width: 250px;

      .promptResults {
        color: $textColor_1;
        text-align: center;
        display: inline-block;
        width: 100%;
        position: relative;
        top: 50%;
      }
    }

    .equipPaging {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 48px;
      border-top: 1px solid $n-borderColor;
    }
  }

  // 右侧设备列表
  .equipCon_main {
    height: 100%;
    overflow: hidden; // 弹出框
    @include main-container;
    @include background-color('con-bgColor8');

    .b /deep/ .el-dialog {
      position: relative;
      padding-bottom: 1rem;
      height: 500px;
      max-height: 520px;

      .el-dialog__header {
        padding: 12px 0;

        .el-dialog__title {
          font-size: 1rem;
          font-weight: normal;
        }
      }

      .el-dialog__body {
        padding: 0;
      }
    }

    // 视频弹窗
    .video-main {
      /deep/ .el-dialog__body {
        position: relative;
        margin-top: 1rem;
        height: 470px;
      }

      /deep/ .el-dialog__headerbtn {
        display: none;
      }

      .VideoAssembly {
        position: relative;
        height: 100%;

        i {
          display: block;
          position: absolute;
          right: 0;
          top: -1rem;
        }
      }
    }

    /deep/ .el-dialog__headerbtn {
      z-index: 9;
    }

    .historyEchar {
      /deep/ .el-dialog__header {
        /deep/ .el-dialog__headerbtn {
          z-index: 999;

          i {
            color: $textColor_1;
          }

          &:hover {
            i {
              color: $btn-blue;
            }
          }
        }
      }

      /deep/ .el-dialog {
        border: 1px solid $n-borderColor;
      }

      @mixin lasLi {
        .las_li_title {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          text-align: center;
          line-height: 48px;
          font-size: 16px;
          border-bottom: 1px solid $n-borderColor;
        }

        .bottom_bnt {
          position: absolute;
          bottom: 2rem;
          right: 3rem;
          width: 50px;
          height: 30px;
          line-height: 30px;
          border-radius: 3px;
          color: $textColor_1;
          cursor: pointer;
          text-align: center;
          border: 1px solid $n-borderColor;
        }
      }

      /deep/ .el-dialog__body {
        margin-top: 30px;
        position: relative;
        width: 100%;
        height: 100%;

        > .title {
          padding-left: 24px;
          position: absolute;
          line-height: 32px;
          top: -43px;
          width: calc(100% - 50px);
          font-size: 16px;
          @include whiteSpace;
        }

        // 实时曲线
        .las_li {
          position: absolute;
          top: 0px;
          left: 0;
          width: 100%;
          height: calc(100% - 80px);
          border-radius: 3px;
          @include lasLi;

          .las_li_title {
            padding-right: 50px;
            padding-left: 24px;
            top: -52px;
            width: 100%;
            font-size: 16px;
            text-align: left;
            @include whiteSpace;
          }

          .curve {
            position: relative;
            left: 0;
            top: 16px;
            width: 100%;
            height: 100%;
            // background-color: $n-frondColor;
            overflow: hidden;

            .header_time {
              margin-top: 16px;
            }

            #containerE {
              margin-top: -10px;
              width: 100%;
              height: calc(100% + 40px);
            }

            .shuiYin {
              position: absolute;
              right: 0;
              bottom: -40px;
              width: 120px;
              height: 20px;
              background-color: $n-frondColor;
            }
          }
        }

        // 历史曲线
        .las_li_history {
          position: relative;
          padding-top: 8px;
          width: 100%;
          height: 100%;
          border-top: 1px solid $n-borderColor;

          /deep/ .el-button {
            display: inline-block;
            position: absolute;
            right: 2%;
            height: 40%;
            width: 6%;
            line-height: 0;
            font-size: 0.75rem;
          }

          /deep/ .el-date-editor {
            background: white;
            border: 1px solid $n-borderColor;
            background-color: $n-backColor;
            line-height: 20px;

            .el-input__icon {
              line-height: 22px;
              background-color: $n-backColor;
            }

            .el-range-separator {
              line-height: 21px;
              width: 8%;
              color: $textColor_2;
            }

            input {
              background-color: $n-backColor;
              line-height: 20px;
            }

            input::-webkit-input-placeholder {
              color: $textColor_2 !important;
              background-color: $n-backColor;
            }

            .el-input__prefix {
              top: 1px;
            }

            .el-input__suffix {
              display: none;
            }
          }

          .el-date-editor.el-input,
          .el-date-editor.el-input__inner {
            background-color: $n-backColor;
          }

          .timepicker {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 32px;

            .bottom_cx {
              margin-left: 12px;
              padding: 0 15px;
              display: flex;
              justify-content: center;
              height: 27px;
              line-height: 25px;
              font-size: 14px;
              border-radius: 3px;
              color: $textColor_2;
              cursor: pointer;
              border: 1px solid $n-borderColor;
              background-color: $btn-blue;
            }
          }

          @include lasLi;

          .history_box {
            position: relative;
            width: 100%;
            height: 400px;

            .el-table {
              position: absolute;
              top: 10px;
              height: 390px;
              z-index: 999999;

              .el-table__body-wrapper {
                z-index: 99999999 !important;

                .el-table__empty-text {
                  margin-top: 165px;
                  font-size: 16px;
                }
              }
            }

            #historyData {
              margin: 0 0 0 auto;
              height: 100%;
            }
          }
        }
      }
    }

    .equipCon_nav {
      /deep/ .el-input {
        .el-input__inner {
          @include font_color('input-txColor1');
        }
      }

      .equipConNm {
        display: flex;
        align-items: center;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 292px;
        min-width: 200px;

        .equipListLeftTopName {
          display: inline-block;
          max-width: 260px;
          text-overflow: ellipsis;
          -ms-text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .toBack {
          font-size: 18px;
        }

        i {
          margin-right: 16px;
          font-size: 16px;
        }
      }

      .tab_btn {
        border-radius: 3px;
        @include background_color('tab-bgColor');
        border: 3px solid;
        @include border_color('tab-bgColor');
        display: flex;

        span {
          padding: 0 15px;
          float: left;
          display: block;
          font-size: 14px;
          @include font_color('tab-txColor');
          text-align: center;
          border-radius: 2px;
          cursor: pointer;
          transition: all 0.5s;

          &:hover {
            color: $btn-blue;
          }

          &:nth-child(2),
          &:nth-child(3) {
            position: relative;

            &:after {
              content: '';
              display: block;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 1px;
              height: 16px;
              background-color: $n-borderColor;
            }
          }
        }

        .onTabNavClass {
          opacity: 1;
          @include background_color('tab-selBgColor');
          @include font_color('tab-selTXColor');

          &:hover {
            color: $textColor_1;
          }
        }
      }
    }

    .equipment_list {
      position: relative;
      overflow: hidden;

      .set-el-table {
        position: absolute;
        top: 50%;
        left: calc(50% - 48px);
        font-size: 24px;
        color: $textColor_1;
      }

      @mixin spanW {
        &:first-child {
          width: 8%;
        }

        &:nth-child(2),
        &:nth-child(3) {
          width: 8%;
        }

        &:nth-child(4) {
          width: 13%;
        }

        &:nth-child(5) {
          width: 80px;
          text-align: center;
        }

        &:nth-child(6),
        &:nth-child(7),
        &:nth-child(8) {
          width: 80px;
          text-align: center;
        }

        &:nth-child(9) {
          width: 80px;
          text-align: center;
        }

        &:last-child {
          flex: 1;
          @include whiteSpace;
        }
      }

      .equipment_header {
        padding: 0 26px 0 16px;
        position: absolute;
        display: flex;
        justify-content: space-between;
        right: 16px;
        width: calc(100% - 32px);
        height: 48px;
        line-height: 48px;

        span {
          display: block;
          font-size: 14px;
          color: $textColor_3;
          @include spanW;
        }

        // 设置
        .tabHeaderSet {
          &:first-child {
            width: 50% !important;
          }

          &:last-child {
            float: right;
            text-align: center;
          }
        }
      }

      .list_link {
        position: relative;
        width: 100%;
        overflow: auto;
        color: $textColor_1;

        /deep/ .el-table {
          width: 100%;
          background-color: transparent;

          .qx {
            margin-top: 16px;
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;

            .iconquxian {
              position: absolute;
              top: 0px !important;
              height: 25px;
            }
          }

          .qxs {
            position: absolute;
            top: -8px;
          }

          .yd {
            display: flex;
            align-items: center;
            font-size: 22px;
          }

          .zi-chan {
            cursor: pointer;
            color: $themeColor_1;
          }

          th.gutter,
          colgroup.gutter {
            display: table-cell !important;
          }

          .el-table__header {
            th,
            tr {
              font-size: 14px;
              text-align: left;
              background: $middleColor_1 !important;
            }
          }

          .el-icon-more {
            transform: rotate(90deg);
            cursor: pointer;
          }

          th,
          tr {
            @include background-color('table-headerBgColor');
            @include font_color('table-headerTXColor');
            border: unset;
            // padding: 6px;
          }

          tbody {
            td {
              padding: unset;
            }

            tr {
              td {
                position: relative;
              }
            }

            .cell {
              height: 48px;
              margin-top: 4px;
              @include background-color('table-rowBgColor');
              @include font_color('table-txColor');

              display: flex;
              font-size: 14px;
              line-height: 48px;
              margin-right: 0px !important;

              .aState {
                width: 100%;
                height: 100%;
                display: flex; //   justify-content: center;
                //   padding-left: 1rem;
                align-items: center;
              }

              .iconfont {
                cursor: pointer;
                font-size: 28px;
                display: flex;
                justify-content: center;
                align-items: center;
              }

              .iconshanchu {
                color: #bf2533;
              }

              .iconbianji {
                color: #346ae4;
                margin-right: 8px;
              }
            }

            tr:hover {
              td {
                @include background-color('table-hoverRowBgColor');

                div {
                  @include background-color('table-hoverRowBgColor');
                }
              }
            }
          }
        }
      }

      // 设置模块
      .set-box {
        padding-top: 16px;
        margin-top: 0 !important;

        li {
          margin: 0 1rem 4px 0;
          padding: 0 16px;
          float: left;
          display: flex;
          justify-content: space-between;
          height: 48px;
          line-height: 48px;
          font-size: 14px;
          overflow: hidden;
          border-radius: 3px;
          border: 1px solid;
          @include border_color('bor-default');
          @include background_color('btn-bgColor4');
          @include font_color('con-textColor8');
          cursor: pointer;

          &:hover {
            color: $textColor_2;
            transition: 0.2s;
            background-color: $n-frondHigh;
          }

          > span {
            display: block;
            float: left;
            width: 80%;
            height: 100%;
          }

          &:nth-child(5n - 1) {
            margin-right: 0 !important;
          }
        }
      }

      .el-table__body-wrapper {
        background-color: $n-middleColor;
      }
    }

    .anologueEquipPaging {
      border-top: 1px solid $n-borderColor;
      @include pagination;
    }

    /deep/ .el-popper {
      height: 28px;
      margin-left: 3%;
      background: white;
      line-height: 20px;
    }
  }

  .fontShow {
    color: $n-frondLight !important;
  }

  .exportDialog {
    display: flex;
    justify-content: center;
    align-items: center;

    /deep/ .el-dialog {
      width: 420px;
      height: auto;
      padding: 0;
      margin-top: 0px !important;

      .el-dialog__header {
        padding: 12px 20px;
      }

      .el-dialog__body {
        padding: 16px;
        border-top: 0.5px solid $n-borderColor;

        .el-select {
          width: 100%;
        }
      }

      .el-dialog__footer {
        padding: 8px 20px;

        .dialog-footer {
          display: flex;
          justify-content: center;
          align-items: center;

          .el-button {
            width: 78px;
          }
        }
      }
    }
  }
}

.el-popper {
  button {
    color: #f56c6c !important;
  }
}

// app界面
$screen-xs-max: 767px;
$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

@media (max-width: $screen-xs-max) {
  .displayNone {
    display: none !important;
  }

  .appDisplayNone {
    display: none !important;
  }

  .appYcNo,
  .appYcName {
    margin-left: 10px;
  }

  .yd {
    font-size: 32px !important;
    transform: translateY(-4px);
  }

  .more {
    padding: 0 15px;
    margin-left: 35px;
    margin-top: -15px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-icon-more {
      width: 25px;
      height: 25px;
      line-height: 25px;
    }
  }

  .equipList_header {
    .searchEquipSide {
      margin-bottom: 16px !important;
    }
  }

  .equipList_header {
    height: unset !important;
    div {
      padding-right: 0px !important;
      .icon16_daochu {
        display: none !important;
      }
    }
  }

  .equipList_header_mian {
    font-size: 16px;
  }

  .equipConNm {
    width: 100% !important;

    span {
      font-size: 16px;
    }
  }

  .leftMenuMultiple {
    /deep/ .el-button {
      color: white !important;

      /deep/ .i {
        margin-left: 6px;
      }
    }
  }

  .margins {
    margin-left: 6px;
  }

  /deep/ .el-message-box__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #historyData {
    width: 100%;
  }

  #equipLists {
    .equipList {
      width: 100%;
      border-right: 0px;

      .equipList_header {
        .el-input {
          width: 100%;
        }
      }

      .equipList_main {
        padding: 0px;
        // height: calc(100% - 120px);
        height: calc(100% - 56px) !important;
        scrollbar-width: none;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
      }

      .equipList_main::-webkit-scrollbar {
        display: none;
      }
    }

    /deep/ .el-dialog {
      width: 90% !important;
    }
  }

  .el-main {
    padding: 20px 20px 0 20px;
  }

  .equipCon_main {
    width: 100%;
    min-width: 100%;

    .equipment_list {
      margin-top: 15px;
      padding-left: 0;
      width: 100%;
      height: calc(100% - 103px - 58px);
      border-top: 1px solid $n-borderColor;

      .list_link {
        width: 100%;
        height: calc(100% - 8px);
      }

      .set-box {
        li {
          width: 100%;
        }
      }
    }

    .b {
      /deep/ .el-dialog {
        width: 90%;
      }
    }

    .historyEchar {
      .las_li_history {
        .timepicker {
          width: 100%;

          /deep/ .el-date-editor {
            width: 48%;
            height: 28px;

            .el-input__inner {
              padding-right: 0px !important;
              height: 28px;
            }

            .el-input__prefix {
              .el-input__icon {
                display: flex !important;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
    }

    .appShow {
      display: inline-block;
    }
  }

  .el-date-range-picker {
    width: 100%;
  }

  .equipCon_nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .main_search {
      display: none !important;
    }

    .equipConNm {
      height: 64px;
      @include font_color('con-textColor8');
      font-size: 18px;
      font-weight: 600;

      .el-icon-arrow-left {
        font-size: 18px !important;
      }
    }

    .tab_btn {
      display: flex;
      justify-content: center;
      width: 100%;
      transform: translateX(0%);

      span {
        flex: 1;
        display: block;
        width: 33%;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 33px;
      }
    }
  }

  // 分页
  .anologueEquipPaging {
    position: absolute;
    bottom: 1px;
    left: 0;
  }

  /deep/ .el-table__body {
    width: 100% !important;

    td {
      &:nth-child(2) {
        .cell,
        .el-tooltip {
          padding-left: 0;
          width: auto !important;
        }
      }
    }
  }
}

@media (min-width: $screen-xs-max) {
  #equipLists {
    min-width: 950px;
  }

  #historyData {
    width: calc(100% - 16px);
  }

  .equipList_header {
    .searchEquipSide {
      padding-right: 16px !important;
      margin-bottom: 16px !important;
    }
  }

  .equipCon_main {
    .equipment_list {
      height: calc(100% - 64px - 48px);
      min-width: 800px;
      padding-left: 16px;

      .set-box {
        li {
          width: calc(20% - 0.8rem) !important;
        }
      }

      .list_link {
        height: 100%;
      }
    }

    .b {
      /deep/ .el-dialog {
        width: 800px;
      }
    }

    .historyEchar {
      .las_li_history {
        .timepicker {
          padding-left: 3%;
          box-sizing: border-box;

          .el-date-editor {
            .el-input__inner {
              width: 330px;
              margin: 0 auto;
            }
          }
        }
      }
    }

    .appShow {
      display: none;
    }
  }

  .equipCon_nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    min-width: 726px;
    overflow: hidden;
    border-bottom: 1px solid $n-borderColor;
    @include page-header;

    .tab_btn {
      min-width: 280px !important;

      span {
        min-width: 92px;
        max-width: 150px;
        overflow: hidden; /*超出部分隐藏*/
        white-space: nowrap; /*不换行*/
        text-overflow: ellipsis; /*超出部分文字以...显示*/
        height: 26px;
        line-height: 26px;

        &::after {
          top: 50px !important;
        }
      }
    }
  }

  .pcDisplayNone {
    display: none !important;
  }
}

.v-modal {
  z-index: 0 !important;
}
